<template>
  <div>
    <div class="header-container">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" router>
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/ebook">电子书管理页面</el-menu-item>
<!--        <el-menu-item index="user">用户管理</el-menu-item>-->
        <el-menu-item index="/category">分类管理</el-menu-item>
        <el-submenu index="2">
          <template slot="title">我的工作台</template>
          <el-menu-item index="/login"  v-if="userInfo===undefined||userInfo===null||userInfo===''">登录</el-menu-item>
          <el-menu-item v-else @click="goOut">退出登录</el-menu-item>
          <el-menu-item index="/aianalyse">智能分析</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "KnHeader",
  data() {
    return {
      activeIndex: '1',

    };
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    goOut(){
      this.$store.dispatch('logOutAsync');
      localStorage.removeItem("token")
    }
  }
}
</script>

<style scoped>
.header-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  /* 将菜单靠右对齐 */
  border: 1px solid #eee;

}
</style>
